<template>
	<view class="page-container">
		
		<block v-if="showCon">
			<!-- #ifdef H5 -->
			<!-- 自定义头部导航 -->
			<view class="fixed" :style="{height: stickyHeight + 'px'}">
				<view class="navigation-title-bar">{{pageTitle}}</view>
			</view>
			<!-- #endif -->
		
			<view class="global-header-sticky" :class="{topBg: Number(scrollTop)>0}" :style="{paddingTop: statusHeight + 'px',height:headerHeight + 'px'}">
				<view class="global-header-bar" :style="{height:headerHeight + 'px'}">
					<view class="global-header-search" :style="{height: buttonHeight + 'px'}" @click="jumpGlobalSearch">
						<text class="icon iconfont">&#xe686;</text>
						<text class="desc">{{uniHotSearchDefault}}</text>
					</view>
				</view>
			</view>
			<!-- 首页顶部栏 -->
			
			<view class="banner">
				<block  v-if="bannerList.length">
					<swiper class="swiper" duration="300" autoplay="true" interval="5000" indicator-color="rgba(255,255,255,.6)" indicator-active-color="#fff">
						<block v-for="(item,index) in bannerList" :key="index">
							<swiper-item>
								<image @click="toAds(item)" :src="item.adsrc" mode="aspectFill"></image>
							</swiper-item>
						</block>
					</swiper>
				</block>
				<block v-else>
					<swiper class="swiper">
						<swiper-item>
							<image src="https://static.member.stourweb.cn/uniapp/static/images/single-spots-banner.png" mode="aspectFill"></image>
						</swiper-item>
					</swiper>
				</block>
				<view class="global-notice" v-if="noticeOpen == 1">
					<uni-notice-bar-home show-icon scrollable :text="noticeText" :color="noticeColor" :backgroundColor="noticeBg" :noticeId="noticeId" />
				</view>
				<!-- 通知消息 -->
			</view>
			<!-- banner -->
						
			<view class="global-menu-block" v-if="navList.length>0">
				<view class="menu-info"  v-for="(item,index) in navList" :key="index">
					<view class="list-url" @click="toNavPage(item)">
						<image class="item-pic" :src="item.m_ico"></image>
						<view class="item-text">{{item.m_title}}</view>
					</view>
				</view>
			</view>
			<!-- 导航 -->
			
			<view class="module-banner" v-if="navAdsList.length > 0">
				<view class="banner-left">
					<image v-if="navAdsList[0]" @click="toAds(navAdsList[0])" :src="navAdsList[0].adsrc" mode="aspectFill"></image>
				</view>
				<view class="banner-right" v-if="navAdsList[1]">
					<image v-if="navAdsList[1]" @click="toAds(navAdsList[1])" :src="navAdsList[1].adsrc" mode="aspectFill"></image>
					<image v-if="navAdsList[2]" @click="toAds(navAdsList[2])" :src="navAdsList[2].adsrc" mode="aspectFill"></image>
				</view>
			</view>
			<!-- 广告位 -->
		
			<view class="module-block" v-if="raiders.length>0">
				<view class="module-bar">
					<text class="module-title">旅游攻略</text>
				</view>
				<view class="raiders-list">
					<view class="news-item" v-for="(item,index) in raiders" :key="index" @click="goRaiders(item.id)">
						<view class="img"><image :src="item.litpic" mode="aspectFill"></image></view>
						<view class="info">
							<view class="tit">{{item.title}}</view>
							<view class="data">
								<view class="attr">{{item.shownum}}次浏览</view>
								<view class="date">{{item.addtime_str}}</view>
							</view>
						</view>
					</view>
					
				</view>
			</view>
			<!-- 旅游攻略 -->
			
			<view class="module-block recommend-module-block" v-if="recommendAd.length>0 || recommendsLeft.length>0">
				<view class="module-bar">
					<text class="module-title">热门推荐</text>
				</view>
				<view class="recommend-list">
					<view class="recommend-colunm">
						<view class="recomend-ad" @click="toAds(recommendAd[0])" v-if="recommendAd.length">
							<image :src="recommendAd[0].adsrc" mode="aspectFill"></image>
						</view>
						<view class="recommend-item" v-for="(item,index) in recommendsLeft" :key="index" @click="toDetail(item)">
							<view class="pic">
								<view class="iconfont isvideo" v-if="item.product_video">&#xe799;</view>
								<image :src="item.litpic" mode="aspectFill"></image>
								<view class="type" >
									<text v-if="item.type_id == 1">线路</text>
									<text v-if="item.type_id == 2">酒店</text>
									<text v-if="item.type_id == 3">租车</text>
									<text v-if="item.type_id == 5">景点</text>
									<text v-if="item.type_id == 13">团购</text>
									<text v-if="item.type_id == 21">商城</text>
									<text v-if="item.type_id == 114">户外</text>
									<text v-if="item.type_id == 118">特产</text>
									<text v-if="item.type_id == 121">美食</text>
								</view>
							</view>
							<view class="info">
								<view class="tit">{{item.title}}</view>
								<view class="attr" v-if="item.attrlist && item.attrlist.length>0">
									<view class="label" v-for="(citem,cindex) in item.attrlist" :key="cindex" v-if="cindex<3">{{citem.attrname}}</view>
								</view>
								<view class="price" v-if="item.price>0"><text class="col">{{globalExchangeRate}}<text class="num">{{item.price}}</text></text>起</view>
								<view class="price" v-else><text class="col">电询</text></view>
							</view>
						</view>
					</view>
					
					<view class="recommend-colunm">
						<view class="recommend-item" v-for="(item,index) in recommendsRight" :key="index" @click="toDetail(item)">
							<view class="pic">
								<view class="iconfont isvideo" v-if="item.product_video">&#xe799;</view>
								<image :src="item.litpic" mode="aspectFill"></image>
								<view class="type" >
									<text v-if="item.type_id == 1">线路</text>
									<text v-if="item.type_id == 2">酒店</text>
									<text v-if="item.type_id == 3">租车</text>
									<text v-if="item.type_id == 5">景点</text>
									<text v-if="item.type_id == 13">团购</text>
									<text v-if="item.type_id == 21">商城</text>
									<text v-if="item.type_id == 114">户外</text>
									<text v-if="item.type_id == 118">特产</text>
									<text v-if="item.type_id == 121">美食</text>
								</view>
							</view>
							<view class="info">
								<view class="tit">{{item.title}}</view>
								<view class="attr" v-if="item.attrlist && item.attrlist.length>0">
									<view class="label" v-for="(citem,cindex) in item.attrlist" :key="cindex" v-if="cindex<3">{{citem.attrname}}</view>
								</view>
								<view class="price" v-if="item.price>0"><text class="col">{{globalExchangeRate}}<text class="num">{{item.price}}</text></text>起</view>
								<view class="price" v-else><text class="col">电询</text></view>
							</view>
						</view>
					</view>
				</view>
				
				<!-- 加载动画 -->
				<uni-load-more v-if="total > 0" :status="loadStatus"></uni-load-more>
			</view>
			<!-- 热门推荐 -->
			
			<st-footer-filing></st-footer-filing>
			<!-- 底部备案信息 -->
			
			<st-customize-footer></st-customize-footer>
			<!-- 自定义tabBar -->
			
			<st-screen-advertising></st-screen-advertising>
			 <!-- 营销推荐 -->
		</block>
	</view>
</template>

<script>
	import { adsPath, adsClientNo } from '@/utils/ads.js'
	import { get_date_format, bMapToQQMap } from '@/utils/utils.js'
	import {toPath} from '@/utils/toPath.js';
	import sxRate from '@/components/sx-rate/index.vue'
	import UniNoticeBarHome from "@/components/uni-notice-bar/uni-notice-bar-home.vue"
	import stCustomizeFooter from "@/components/st-customize-footer.vue"
	import {getProDetailPage,getProIndexPage} from "@/utils/toPath.js"
	export default {
		components:{
			sxRate,
			UniNoticeBarHome,
			stCustomizeFooter
		},
		props:{
			scrollTop: {
				type: [String, Number],
				default: 0
			}
		},
		data() {
			return {
				showCon: false,
				isFixed: false,
				pageTitle: uni.getStorageSync('cfg_home_page_title'),
				topBg: 'transparent',
				stickyHeight: 0,
				statusHeight: 0,//状态栏高度
				headerHeight: 0,//头部导航栏高度
				menuHeight: 0,
				uniHotSearchDefault: '', //全局热搜词
				bannerList: [],
				buttonHeight: 0,//胶囊按钮高度
				requestNum: 7,
				noticeOpen: 0,
				noticeText:'',
				noticeId:'1',
				noticeColor: '#ff6146',
				noticeBg:'#ffedea',
				navList:[],//导航
				navAdsList:[],//导航下方广告
				raiders:[],
				recommendAd:[],
				page: 1,
				pagesize: 10,
				recommendsLeft:[],
				recommendsRight:[],
				total: 1,
				loadStatus: 'more',
				noMsg: '抱歉，没有找到符合条件的产品！',
			}
		},
		updated() {
			this.hasLogin = this.$store.state.hasLogin;
		},
		created() {
			
			let {stickyHeight, statusBarHeight, navBarHeight, menuHeight} = getApp().globalData;
			
			// #ifndef MP-TOUTIAO
			//状态栏高度
			this.stickyHeight = stickyHeight;
			//状态栏高度
			this.statusHeight = statusBarHeight;
			// #endif
			//自定义头部导航栏高度
			this.headerHeight = navBarHeight;
			
			
			//胶囊高度
			this.menuHeight = menuHeight;
			this.buttonHeight = this.menuHeight>0 ? this.menuHeight : (this.headerHeight - 10);
			
			this.exchange_rate=uni.getStorageSync('exchange_rate');
			this.cfg_satisfy=uni.getStorageSync('cfg_satisfy');
			this.setPage();
		},
		methods: {
			
			// 首页页面请求
			setPage() {
				
				this.showCon = true;
				
				// 全局热搜词
				this.uniHotSearchDefault = uni.getStorageSync('uniHotSearchDefault');
				uni.pageScrollTo({
					duration: 0,
					scrollTop: 0
				});
				
				// banner
				this.getBanner();
				
				// 通知消息
				this.getNotice();
				
				//导航
				this.getIndexNav();
				
				//导航下方广告位
				this.getNavAd();
				
				//热门攻略
				this.getRaiders();
				
				//热门推荐广告位
				this.getRecommendAd();
				
			},
						
			// 全局搜索
			jumpGlobalSearch() {
				uni.navigateTo({
					url: './search'
				})
			},
			
			// banner
			async getBanner() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_309_spot_banner'
					}
				res = await this.$http(params);
				if (res.status) {
					this.bannerList = res.data;
				}
				
				// 请求完成事件
				this.requestEnd();
			},
			
			//notice
			async getNotice(){
				let params = {
					method: "api/v2/system/get_sys_configs",
					filed: 'cfg_spot_notice_open,cfg_spot_notice'
				}
				let res = await this.$http(params);
				if (res.status) {
					this.noticeOpen = res.data.cfg_spot_notice_open;
					this.noticeText = res.data.cfg_spot_notice;
				}
				
				// 请求完成事件
				this.requestEnd();
			},
			
			// 首页导航
			async getIndexNav() {
				let res, client_no = adsClientNo(),
				params = {
					client_no,
					method: 'api/v2/index/index_nav',
				}
				res = await this.$http(params);
				if (res.status) {
					this.navList = res.data.list;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往导航所在页面
			toNavPage(item) {
				adsPath(item.type, item.m_typeid, item.product_id, item.m_url, item.m_title,item.is_nested);
			},
			
			// 导航下方广告位
			async getNavAd() {
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: "uni_index_309_spot_body"
					}
				res = await this.$http(params);
				//console.log(res)
				if (res.status) {
					this.navAdsList = res.data;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 热门攻略
			async getRaiders() {
				let params = {
					method: 'api/v2/index/hot_raiders',
					row: 3
				};
				let res = await this.$http(params);
				if (res.status) {
					this.raiders = res.data.list;
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往攻略详情
			goRaiders(id) {
				uni.navigateTo({
					url: '/subPackages/strategy/detail?id=' + id
				})
			},
			
			//热门推荐广告位
			async getRecommendAd(){
				let res, client_no = adsClientNo(),
					params = {
						method: 'api/v2/system/new_ads',
						prefix: 's_index',
						client_no: client_no,
						custom_label: 'uni_index_309_spot_hot'
					}
				res = await this.$http(params);
				if (res.status) {
					this.recommendAd = res.data;
				}
				
				//热门推荐列表
				this.getRecommendList();
				
				// 请求完成事件
				this.requestEnd();
			},
			
			//热门推荐列表
			async getRecommendList(){

				let params = {
					method: 'api/v2/spot/get_hot_product',
					page: this.page,
					pagesize : this.pagesize,
				};
				if(this.loadStatus != 'more'){
				 	return;
				}
				this.loadStatus = 'loading';
				let res = await this.$http(params);
				if( res.status ){
					if(res.data.product_list.length){
						// 预处理数据
						for(var i=0;i<res.data.product_list.length;i++){
							if(this.recommendAd.length){
								if(i%2==0){
									this.recommendsRight.push(res.data.product_list[i])
								}else{
									this.recommendsLeft.push(res.data.product_list[i])
								}
							}else{
								if(i%2==0){
									this.recommendsLeft.push(res.data.product_list[i])
								}else{
									this.recommendsRight.push(res.data.product_list[i])
								}
							}
						}
						this.loadStatus = 'noMore';
						let nowsize = this.page * this.pagesize;
						if (res.data.product_list.length>=10) {
							this.page = this.page + 1;
							this.loadStatus = 'more';
						}
					}else{
						this.loadStatus = 'noMore';
					}
					 
				}
				// 请求完成事件
				this.requestEnd();
			},
			
			// 前往产品详情页面
			toDetail(item) {
				let path;
				path = getProDetailPage(item.type_id, {
					id: item.id
				});
				if (path) {
					uni.navigateTo({
						url: path
					})
				}
			},
			
			// 前往广告位的页面
			toAds(item) {
				adsPath(item.adtype, item.typeid, item.proid, item.adlink, item.adname);
			},
			
			// 请求完成事件
			requestEnd() {
				this.requestNum--;
				if (this.requestNum < 1) {
					this.showCon = true;
				}
			},
			
				
		}
	}
</script>

<style lang="scss">
.page-container{
	position: relative;
}

// 自定义头部导航
.fixed {
	position: sticky;
	top: 0;
	left: 0;
	right: 0;
	z-index: 111;
	background: $uni-bg-color;
	.navigation-title-bar{
		position: absolute;
		left: 24rpx;
		right: 24rpx;
		bottom: 8rpx;
		height: 64rpx;
		line-height: 64rpx;
		font-size: $uni-font-size-lg;
		font-weight: bold;
		text-align: center;
	}
}

.global-header-sticky{
	left: 0;
	right: 0;
	z-index: 3;
	/* #ifdef H5 */
	position: absolute;
	top: 88rpx;
	padding-right: 24rpx;
	/* #endif */
	/* #ifndef H5 */
	position: fixed;
	top: 0;
	padding-right: 28%;
	&.topBg{
		// position: fixed;
		background-color: #fff;
		.global-header-search{
			background-color: #e5e5e5!important;
		}
	}
	/* #endif */
	.global-header-bar {
		@extend .justifyspace;
		justify-content: flex-start;
		align-items: center;
		padding: 0 0 0 24rpx;
		.global-header-select {
			color: #fff;
			font-size: 34rpx;
	
			.icon {
				vertical-align: middle;
				margin: -2rpx 0 0 6rpx;
			}
		}
	
		.global-header-search {
			padding: 0 20rpx;
			color: $uni-text-color-grey;
			flex: 1 1 auto;
			margin-left: 10rpx;
			border-radius: 80rpx;
			font-size: $uni-font-size-sm;
			background-color: rgba(255,255,255,.9);
			display: flex;
			align-items: center;
			.icon {
				color: #333;
				margin-right: 8rpx;
				font-size: $uni-font-size-lg;
			}
		}
	}
}

.banner {
	position: relative;
	min-height: 220rpx;
	.swiper, image {
		height: 720rpx;
	}
	image {
		display: block;
		width: 100%;
	}
}

.global-notice{
	position: absolute;
	bottom: 50rpx;
	left: 0;
	right: 0;
	z-index: 1;
	padding: 0 24rpx;
	.uni-noticebar{
		// padding: 2rpx 6rpx 2rpx 14rpx!important;
		margin-bottom: 0;
		&__content-text--scrollable{
			font-size: 26rpx;
		}
		.uni-noticebar-icon{
			.uni-icons{
				font-size: 15px!important;
				color: #ff6146!important;
				font-weight: bold;
			}
		}
		.uni-noticebar-close{
			.uni-icons{
				color: #999!important;
			}
		}
	}
}

.global-menu-block{
	display: flex;
	align-items: center;
	justify-content: flex-start;
	flex-wrap: wrap;
	position: relative;
	z-index: 1;
	padding: 28rpx 25rpx 4rpx;
	background-color: #fff;
	position: relative;
	margin-top: -18rpx;
	border-radius: 20rpx 20rpx 0 0;
	.menu-info{
		width: 160rpx;
		height: 120rpx;
		border-radius: 20rpx;
		margin:0 20rpx 20rpx 0;
		&:nth-of-type(4n){
			margin-right: 0;
		}
		&:nth-of-type(5n+1){
			background-color: #f1f5ff;
		}
		&:nth-of-type(5n+2){
			background-color: #eafcf7;
		}
		&:nth-of-type(5n+3){
			background-color: #f8f5fd;
		}
		&:nth-of-type(5n+4),
		&:nth-of-type(5n+5){
			background-color: #fff3ef;
		}
		.list-url{
			padding: 20rpx 0 0;
			width: 160rpx;
			height: 100rpx;
		}
		.item-pic{
			display: block;
			height: 52rpx;
			width: 52rpx;
			margin: 0 auto;
		}
		.item-text{
			display: block;
			width: 100%;
			text-align: center;
			font-size: $uni-font-size-sm;
			color: #333;
			margin-top: 4rpx;
		}
	}
}

.module-banner {
	@extend .displayflex;
	justify-content: space-between;
	padding: 24rpx;
	background-color: $uni-bg-color;
	border-radius: 20rpx;
	.banner-left {
		width: 340rpx;
		height: 340rpx;
		@extend .flex1;
		image{
			display: block;
			width: 100%;
			height: 340rpx;
			border-radius: 20rpx;
		}
	}
	.banner-right{
		margin-left: 22rpx;
		width: 340rpx;
		height: 340rpx;
		@extend .displayflex;
		flex-direction: column;
		image{
			display: block;
			width: 340rpx;
			height: 50%;
			@extend .flex1;
			border-radius: 20rpx;
			&:last-child{
				margin-top: 20rpx;
			}
		}
	}
}

.module-block{
	padding-bottom: 20rpx;
	background-color: $uni-bg-color;
	&.recommend-module-block{
		padding-bottom: 0;
	}
	.module-bar {
		@include justifyspacec;
		padding: 24rpx;

		.module-title {
			font-size: 36rpx;
			font-weight: bold;
		}
	}
	.raiders-list{
		padding: 0 24rpx;
		.news-item{
			margin-bottom: 30rpx;
			@extend .justifyspacec;
			&:last-child{
				margin-bottom: 0;
			}
			.img{
				width: 160rpx;
				height: 160rpx;
				border-radius: 20rpx;
				overflow: hidden;
				image{
					width: 100%;
					height: 100%;
				}
			}
			.info{
				width: 522rpx;
				.tit{
					height: 80rpx;
					font-size: $uni-font-size-base;
					font-weight: bold;
					line-height: 40rpx;
					color: #333;
					@extend .ellipses;
				}
				.data{
					@extend .justifyspacec;
					font-size: $uni-font-size-sm;
					color: #989898;
					margin-top: 34rpx;
				}
			}
		}
	}
}

.recommend-list{
	display: flex;
	align-items: flex-start;
	justify-content: space-between;
	padding: 0 24rpx;
	.recommend-colunm{
		width: 340rpx;
		.recomend-ad{
			width: 340rpx;
			height: 340rpx;
			border-radius: 20rpx;
			overflow: hidden;
			margin-bottom: 22rpx;
			image{
				width: 100%;
				height: 100%;
			}
		}
		.recommend-item{
			width: 340rpx;
			margin-bottom: 22rpx;
			.pic{
				width: 340rpx;
				height: 340rpx;
				border-radius: 20rpx;
				overflow: hidden;
				position: relative;
				image{
					width: 100%;
					height: 100%;
				}
				.isvideo{
					position: absolute;
					top: 20rpx;
					right: 20rpx;
					font-size: 40rpx;
				}
				.type{
					position: absolute;
					bottom: 12rpx;
					left: 24rpx;
					font-size: $uni-font-size-sm;
					color: #fff;
					text-shadow: 0 4rpx 10rpx 0 #000;
				}
			}
			.info{
				margin-top: 22rpx;
				.tit{
					font-size: $uni-font-size-base;
					font-weight: bold;
					color: #3d3d3d;
					@extend .ellipses;
				}
				.attr{
					@extend .alignItems;
					flex-wrap: wrap;
					height: 44rpx;
					overflow: hidden;
					margin-top: 20rpx;
					.label{
						height: 40rpx;
						padding: 0 10rpx;
						font-size: 22rpx;
						color: #ff6146;
						line-height: 40rpx;
						border: 1px solid #ff6146;
						border-radius: 6rpx;
						margin: 0 10rpx 10rpx 0;
						&:nth-of-type(3){
							margin-right: 0;
						}
					}
				}
				.price{
					font-size: $uni-font-size-mini;
					color: $uni-text-color-grey;
					font-family: Arial, Helvetica, sans-serif;
					margin-top: 18rpx;
					.col{
						font-size: $uni-font-size-sm;
						color: #ff6146;
						.num{
							font-size: $uni-font-size-lg;
							font-weight: bold;
							margin: 0 3rpx;
						}
					}
				}
			}
		}
	}
}

</style>
